<style>
    .rich-table-cell{
        font-size:15px;
    }
</style>
<f:view>
    <a4j:region>
    <h:form>
        <h:panelGrid columns="3" >
            <h:outputText value="House Postings of #{sessionBean.ejbSession.currentSite.site}" style="font-size: 20px; font-weight: bold;"/>
            <c:if test="${!empty sessionBean.areasCurrentSite}" >
            <h:outputText value=", " style="font-size: 20px; font-weight: bold;"/>
            <h:selectOneMenu id="area" value="#{adminBean.areaId}" >
                    <f:selectItem
                        itemValue="0"
                        itemLabel="All Areas"/>
                <c:forEach var="area" items="#{sessionBean.areasCurrentSite}" >
                    <f:selectItem
                        itemValue="#{area.id}"
                        itemLabel="#{area.area}"/>
                </c:forEach>
                <a4j:support event="onchange" action="#{adminBean.changeCurrentArea}" reRender="housPostingsForm"/>
            </h:selectOneMenu>
            </c:if>
        </h:panelGrid>
    </h:form>
    <div align="center">
    <h:form>
        <h:panelGroup id="searchMessages" ><h:messages style="color: red" styleClass="errorMessage" /></h:panelGroup>
        <h:panelGrid columns="3" >
            <h:panelGrid columns="6" >
                <h:outputText value="Search for:"/>
                <h:inputText id="searchValue" maxlength="50" value="#{housBean.searchValue}" />
                <h:outputText value="in:"/>
                <h:selectOneMenu id="housCategorie" value="#{housBean.housCategorieId}" >
                        <f:selectItem
                            itemValue="0"
                            itemLabel="All Housing"/>
                    <c:forEach var="categorie" items="#{adminBean.housCategories}" >
                        <f:selectItem
                            itemValue="#{categorie.id}"
                            itemLabel="#{categorie.categorie}"/>
                    </c:forEach>
                </h:selectOneMenu>
                <h:outputText value=", "/>
                <h:selectOneMenu id="housType" value="#{housBean.searchType}" >
                    <f:selectItem
                        itemValue="both"
                        itemLabel="both types"/>
                    <f:selectItem
                        itemValue="offered"
                        itemLabel="offered"/>
                    <f:selectItem
                        itemValue="wanted"
                        itemLabel="wanted"/>
                </h:selectOneMenu>
            </h:panelGrid>
            <a4j:commandButton id="submit" type="submit" value="Search" reRender="searchMessages,housPostingsForm" />
            <h:panelGroup>
                <h:selectBooleanCheckbox value="#{housBean.onlySearchTitles}" /><h:outputText value="only search titles"/>
                <h:selectBooleanCheckbox value="#{housBean.hasImage}" /><h:outputText value="has image"/>
            </h:panelGroup>
            <h:panelGrid columns="4" >
                <h:selectOneMenu id="amountType" value="#{housBean.searchAmountType}" >
                    <f:selectItem
                        itemValue="any"
                        itemLabel="any Amount:"/>
                    <f:selectItem
                        itemValue="sale"
                        itemLabel="Sale Price:"/>
                    <f:selectItem
                        itemValue="rent"
                        itemLabel="Rent:"/>
                </h:selectOneMenu>
                <h:panelGrid columns="4">
                    <rich:inplaceInput id="minAmountValue" defaultLabel="min amount" value="#{housBean.searchMinAmountValue}" inputWidth="50px" converter="doubleConverter" converterMessage="the min amount is not valid"/>
                    <h:outputText value="$, "/>
                    <rich:inplaceInput id="maxAmountValue" defaultLabel="max amount" value="#{housBean.searchMaxAmountValue}" inputWidth="50px" converter="doubleConverter" converterMessage="the max amount is not valid"/>
                    <h:outputText value="$."/>
                </h:panelGrid>
                <a4j:region>
                <h:selectOneMenu id="sizeType" value="#{housBean.searchSizeType}" >
                    <f:selectItem
                        itemValue="br"
                        itemLabel="# BR:"/>
                    <f:selectItem
                        itemValue="ft2"
                        itemLabel="SqFt:"/>
                    <a4j:support event="onchange" reRender="sizeValuePanel" ajaxSingle="true" />
                </h:selectOneMenu>
                </a4j:region>
                <h:panelGrid id="sizeValuePanel" columns="4">
                    <rich:inplaceSelect id="sizeValue" defaultLabel="min # br" value="#{housBean.searchMinSizeValue}" selectWidth="50px" listWidth="55px" rendered="#{housBean.searchSizeType=='br'}" >
                        <f:selectItem itemValue="" itemLabel="none"/>
                        <f:selectItem itemValue="1" itemLabel="1"/>
                        <f:selectItem itemValue="2" itemLabel="2"/>
                        <f:selectItem itemValue="3" itemLabel="3"/>
                        <f:selectItem itemValue="4" itemLabel="4"/>
                        <f:selectItem itemValue="5" itemLabel="5"/>
                        <f:selectItem itemValue="6" itemLabel="6"/>
                        <f:selectItem itemValue="7" itemLabel="7"/>`
                        <f:selectItem itemValue="8" itemLabel="8"/>
                    </rich:inplaceSelect>
                    <rich:inplaceInput id="sizeValue1" defaultLabel="min sqft" value="#{housBean.searchMinSizeValue}" inputWidth="50px" converter="integerConverter" converterMessage="the min sqft should be integer" rendered="#{housBean.searchSizeType=='ft2'}"/>
                    <h:outputText value="#{housBean.searchSizeType}, " />
                    <rich:inplaceSelect id="sizeValue2" defaultLabel="max # br" value="#{housBean.searchMaxSizeValue}" selectWidth="50px" listWidth="55px" rendered="#{housBean.searchSizeType=='br'}" >
                        <f:selectItem itemValue="" itemLabel="none"/>
                        <f:selectItem itemValue="1" itemLabel="1"/>
                        <f:selectItem itemValue="2" itemLabel="2"/>
                        <f:selectItem itemValue="3" itemLabel="3"/>
                        <f:selectItem itemValue="4" itemLabel="4"/>
                        <f:selectItem itemValue="5" itemLabel="5"/>
                        <f:selectItem itemValue="6" itemLabel="6"/>
                        <f:selectItem itemValue="7" itemLabel="7"/>`
                        <f:selectItem itemValue="8" itemLabel="8"/>
                    </rich:inplaceSelect>
                    <rich:inplaceInput id="sizeValue3" defaultLabel="max sqft" value="#{housBean.searchMaxSizeValue}" inputWidth="50px" converter="integerConverter" converterMessage="the max sqft should be integer" rendered="#{housBean.searchSizeType=='ft2'}"/>
                    <h:outputText value="#{housBean.searchSizeType}." />
                </h:panelGrid>
            </h:panelGrid>
            <h:panelGroup>
                <h:selectBooleanCheckbox value="#{housBean.searchCats}" /><h:outputText value="cats"/>
                <h:selectBooleanCheckbox value="#{housBean.searchDogs}" /><h:outputText value="dogs"/>
            </h:panelGroup>
        </h:panelGrid>
        <rich:spacer height="10" />    
    </h:form>
    <a4j:status startText="Searching..." stopText="Complete" />
    </a4j:region>
    <h:form id="housPostingsForm">
        <rich:dataTable id="housPostingsTable" rows="5" value="#{housBean.listHousing}" var="hous" border="1" >
            
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="Publish Date" />
                </f:facet>
                <h:outputText value="#{hous.publishDate}" >
                    <f:convertDateTime type="date" dateStyle="medium"/>
                </h:outputText>
            </rich:column>
            
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="Title" />
                </f:facet>
                <h:outputLink value="/site/faces/posting.html?site=#{sessionBean.ejbSession.currentSite.id}&type=house&id=#{hous.id}" >
                    <h:outputText value="#{hous.title}"/>
                </h:outputLink>
                <h:outputText value=", #{hous.amountType} #{hous.amountValue}$" rendered="#{hous.amountValue>0}" />
                <h:outputText value=" / #{hous.sizeValue}#{hous.sizeType}" rendered="#{hous.amountValue>0 && hous.sizeValue>0}" />
                <h:outputText value=", #{hous.sizeValue}#{hous.sizeType}" rendered="#{hous.amountValue==0 && hous.sizeValue>0}" />
                <h:outputText value=" - (#{hous.location})" rendered="#{hous.location!=null && hous.location!=''}"/>
            </rich:column>
            
            <rich:column rendered="#{housBean.housCategorieId==0}">
                <f:facet name="header">
                    <h:outputText value="Categorie" />
                </f:facet>
                <h:outputText value="#{hous.categorie}" />
            </rich:column>
            
        </rich:dataTable>
        <rich:spacer height="10" />
        <rich:datascroller for="housPostingsTable" page="#{housBean.page}" maxPages="5" />
    </h:form>
    </div>
    <h:form>
        <h:commandLink value="Back to Welcome Page" action="#{housBean.backEdit}" />
    </h:form>
    <rich:separator height="1" />
</f:view>